<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API数据查询工具</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f7fa;
        }
        .container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 30px;
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .api-info {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-family: monospace;
            overflow-x: auto;
        }
        button {
            background-color: #4285f4;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #3367d6;
        }
        .controls {
            text-align: center;
            margin-bottom: 30px;
        }
        .loading {
            text-align: center;
            color: #666;
            display: none;
            margin: 20px 0;
        }
        .result {
            margin-top: 20px;
            padding: 20px;
            border-radius: 6px;
            border: 1px solid #e1e4e8;
            display: none;
        }
        .error {
            color: #d93025;
            background-color: #fce8e6;
            padding: 15px;
            border-radius: 6px;
            display: none;
        }
        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            font-size: 14px;
            line-height: 1.5;
        }
        .status {
            padding: 8px 12px;
            border-radius: 4px;
            font-weight: bold;
            margin-right: 10px;
        }
        .status-success {
            background-color: #e6f4ea;
            color: #137333;
        }
        .status-error {
            background-color: #fce8e6;
            color: #d93025;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>API数据查询工具</h1>
        
        <div class="api-info">
            输入地址: 需要在html文件后添加参数code, 例如: <br>
            <code>file:///path/to/API.bak.html?code=600121</code ><br><br>
        </div>
        
        <div class="controls">
            <button id="fetchBtn">获取API数据</button>
        </div>
        
        <div class="loading">
            <p>正在请求数据，请稍候...</p>
        </div>
        
        <div class="error" id="errorMsg"></div>
        
        <div class="result" id="resultContainer">
            <div style="margin-bottom: 15px;">
                <span class="status status-success" id="status">请求成功</span>
                <span id="responseTime"></span>
            </div>
            <h3>响应数据:</h3>
            <pre id="responseData"></pre>
        </div>
    </div>

<script>
    // 从URL参数中获取code值
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get('code'); // 默认值为600121
    
    // API地址，根据code参数动态生成
    const apiUrl = `https://apphis.longhuvip.com/w1/api/index.php?a=GetDayZhangTing&st=10&apiv=w38&c=HisLimitResumption&PhoneOSNew=1&Index=0&StockID=${code}`;
    
    // 获取当前页面的协议和主机名，动态构建代理服务器地址
    // 如果是本地文件打开，则使用localhost作为默认主机名
    const hostname = '10.0.0.6' || 'localhost';
    const protocol = window.location.protocol === 'file:' ? 'http:' : window.location.protocol;
    const proxyBaseUrl = `${protocol}//${hostname}:9999`;
    const proxyUrl = `${proxyBaseUrl}/proxy`;
    
    // 获取DOM元素
    const fetchBtn = document.getElementById('fetchBtn');
    const loading = document.querySelector('.loading');
    const errorMsg = document.getElementById('errorMsg');
    const resultContainer = document.getElementById('resultContainer');
    const responseData = document.getElementById('responseData');
    const responseTime = document.getElementById('responseTime');
    const status = document.getElementById('status');
    
    // 绑定按钮点击事件
    fetchBtn.addEventListener('click', fetchData);
    
    // 请求数据函数
    async function fetchData() {
        // 重置状态
        resetUI();
        // 显示加载状态
        loading.style.display = 'block';
        fetchBtn.disabled = true;
        fetchBtn.textContent = '正在请求...';
        
        const startTime = performance.now();
        
        try {
            // 通过代理服务器请求API
            const response = await fetch(proxyUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    url: apiUrl,
                    method: 'GET',
                    headers: {
                        'User-Agent': 'Dalvik/2.1.0 (Linux; U; Android 9; HPB-AN00 Build/PQ3A.190605.003)',
                        'Host': 'apphis.longhuvip.com',
                    },
                }),
            });
            
            const endTime = performance.now();
            responseTime.textContent = `响应时间: ${(endTime - startTime).toFixed(2)}ms`;
            
            // 关键调试点 1: 打印完整的响应对象信息
            console.log("--- 响应状态 ---");
            console.log(`状态码: ${response.status}`);
            console.log(`状态文本: ${response.statusText}`);

            // 关键调试点 2: 打印所有响应头
            console.log("--- 响应头 ---");
            response.headers.forEach((value, key) => {
                console.log(`${key}: ${value}`);
            });

            // 检查响应是否成功
            if (!response.ok) {
                // 如果状态码不是2xx，尝试读取响应文本看是否有错误信息
                const errorDetails = await response.text();
                throw new Error(`HTTP 错误！状态码: ${response.status}\n详情: ${errorDetails}`);
            }
            
            // 关键调试点 3: 先以文本形式读取响应体，看看原始数据是什么
            console.log("--- 原始响应体 (文本形式) ---");
            const rawResponseText = await response.text();
            console.log(rawResponseText);

            // 尝试将文本解析为JSON
            const data = JSON.parse(rawResponseText);
            
            // 显示结果
            loading.style.display = 'none';
            resultContainer.style.display = 'block';
            responseData.textContent = JSON.stringify(data, null, 2);
            status.className = 'status status-success';
            status.textContent = '请求成功';
            
        } catch (error) {
            const endTime = performance.now();
            responseTime.textContent = `请求失败时间: ${(endTime - startTime).toFixed(2)}ms`;
            
            // 显示错误信息
            loading.style.display = 'none';
            errorMsg.style.display = 'block';
            // 显示更详细的错误堆栈
            errorMsg.textContent = `请求失败: ${error.message}\n\n请查看浏览器开发者工具的控制台(Console)获取更多信息。`;
            console.error("--- Fetch 错误 ---", error);
            
            // 在结果区域也显示错误
            resultContainer.style.display = 'block';
            status.className = 'status status-error';
            status.textContent = '请求失败';
            responseData.textContent = error.stack;
            
        } finally {
            // 恢复按钮状态
            fetchBtn.disabled = false;
            fetchBtn.textContent = '获取API数据';
        }
    }
    
    // 重置UI状态
    function resetUI() {
        loading.style.display = 'none';
        errorMsg.style.display = 'none';
        resultContainer.style.display = 'none';
        responseData.textContent = '';
        responseTime.textContent = '';
    }
</script>
</body>
</html>